<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>携程在手,说走就走</title>
    <link rel="icon" href="./images/promotion-app-log.png" type="image/x-icon"/>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 顶部搜索 -->
    <div class="search">
        <div class="ipt">搜索:目的地/酒店/经典/航班号</div>
        <a href="#" title="" class="user">我 的</a>
    </div>

    <!-- 轮播图 -->
    <div class="banner">
        <ul>
            <li><img src="./images/banner05.jpg" alt=""></li>
            <li><img src="./images/banner01.jpg" alt=""></li>
            <li><img src="./images/banner02.jpg" alt=""></li>
            <li><img src="./images/banner03.jpg" alt=""></li>
            <li><img src="./images/banner04.jpg" alt=""></li>
            <li><img src="./images/banner05.jpg" alt=""></li>
            <li><img src="./images/banner01.jpg" alt=""></li>
        </ul>
        <!-- 小圆点列表 -->
        <ol>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>

    <!-- 局部导航条 -->
    <div class="localNav">
        <div class="item">
            <a href="#" title="攻略·经典">
                <span class="icon"></span>
                <span>攻略·经典</span>
            </a>
        </div>
        <div class="item">
            <a href="#" title="门票·玩乐">
                <span class="icon"></span>
                <span>门票·玩乐</span>
            </a>
        </div>
        <div class="item">
            <a href="#" title="美食林">
                <span class="icon"></span>
                <span>美食林</span>
            </a>
        </div>
        <div class="item">
            <a href="#" title="周边游">
                <span class="icon"></span>
                <span>周边游</span>
            </a>
        </div>
        <div class="item">
            <a href="#" title="一日游">
                <span class="icon"></span>
                <span>一日游</span>
            </a>
        </div>
    </div>

    <!-- 主导航栏 -->
    <div class="mainNav">
        <div class="col">
            <div class="item">
                酒店
            </div>
            <div class="item">
                民宿·客栈
            </div>
            <div class="item">
                火车票
            </div>
            <div class="item">
                机票
            </div>
        </div>

        <div class="col">
            <div class="item">
                机票
            </div>
            <div class="item">
                火车票
            </div>
            <div class="item">
                汽车·船票
            </div>
            <div class="item">
                专车·租车
            </div>
        </div>
        <div class="col">
            <div class="item">
                旅游
            </div>
            <div class="item">
                高铁游
            </div>
            <div class="item">
                邮轮游
            </div>
            <div class="item">
                定制游
            </div>
        </div>

    </div>

    <!-- 分类导航 -->
    <div class="subNav">
        <ul>
            <li>
                <a href="#">
                    <span class="icon"></span>
                    自由行
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="icon"></span>
                    WiFi电话卡
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="icon"></span>
                    保险·签证
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="icon"></span>
                    换钞·购物
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="icon"></span>
                    当地向导
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="icon"></span>
                    特价机票
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="icon"></span>
                    礼品卡
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="icon"></span>
                    申卡·借钱
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="icon"></span>
                    旅拍NEW
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="icon"></span>
                    更多
                </a>
            </li>
        </ul>
    </div>

    <!-- 特卖汇 -->
    <div class="sale">
        <div class="top">
            <span class="icon"></span>
            <div class="more">更多 ></div>
        </div>
        <div class="bottom">
            <div class="item">
                <img src="./images/pic-tmh-01.jpg" alt="">
                <p>三亚5日自由行(5钻)·节后错峰款【高星度假型酒店合辑·4晚连住】预订赠出行礼遇·网红酒店|唯美海滩|亲子宅玩|海鲜盛宴|惬意泳池|热剧取景地·暖秋当红旅行地 累计超6万人真实出行！</p>
                <p>￥<span>1504</span>起</p>
            </div>
            <div class="item">
                <div class="content">
                    <div class="text">
                        <p>千款特价</p>
                        <text>走过路过不错过</text>
                    </div>
                    <span class="icon"></span>
                </div>
                <div class="content">
                    <p>境外精选</p>
                    <text>限时抢购</text>
                    <span class="icon"></span>
                </div>
                <div class="content">
                    <p>周边玩乐</p>
                    <text>欢乐度周末</text>
                    <span class="icon"></span>
                </div>
            </div>
        </div>
    </div>

    <!-- 热门活动 -->
    <div class="hot">
        <div class="top">
            <div class="icon">
                <span></span>
                <span></span>
            </div>
            <div class="more">获取更多福利 ></div>
        </div>
        <div class="bottom">
            <div class="row">
                <a href="#">
                    <img src="./images/huodong01.png" alt="">
                </a>
                <a href="#">
                    <img src="./images/huodong02.png" alt="">
                </a>
            </div>
            <div class="row">
                <a href="#">
                    <img src="./images/huodong03.jpg" alt="">
                </a>
                <a href="#">
                    <img src="./images/huodong04.jpg" alt="">
                </a>
            </div>
            <div class="row">
                <a href="#">
                    <img src="./images/huodong05.jpg" alt="">
                </a>
                <a href="#">
                    <img src="./images/huodong06.jpg" alt="">
                </a>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="btNav">
        <div class="col">
            <span></span>
            <p>电话预定</p>
        </div>
        <div class="col">
            <span></span>
            <p>下载客户端</p>
        </div>
        <div class="col">
            <span></span>
            <p>我 的</p>
        </div>
    </div>

    <!-- 底部 -->
    <footer>
        <div class="top">
            <span>网站地图　|</span>
            <span>🌏Language</span>
            <span>|　电脑版</span>
        </div>
        <div class="bottom">
            ©Sunny｜粤ICP备XXXXXXXX号-XXXXXX
        </div>
    </footer>

    <script>
        window.addEventListener("load",function(){
            var search = document.querySelector(".search");
            var banner = document.querySelector(".banner");
            var ul = banner.children[0];
            var ol = banner.children[1];
            var w = banner.offsetWidth;
            var index = 0;
            var flag = false;
            var timer = setInterval(function(){
                index ++;
                var translateX = -w * index;
                ul.style.transition = "all 1s";
                ul.style.transform = 'translateX('+ translateX +'px)';
            } , 2000);

            ul.addEventListener("transitionend",function(){
                if( index == 5){
                    index = 0;
                    ul.style.transition = 'none';
                    var translateX = -w * index;
                    ul.style.transform = 'translateX('+ translateX +'px)';
                } else if(index < 0){
                    index = 2;
                    ul.style.transition = 'none';
                    var translateX = -w * index;
                    ul.style.transform = 'translateX('+ translateX +'px)';
                }
                ol.querySelector('.current').classList.remove('current');
                ol.children[index].classList.add('current');
            })

            var startX = 0;
            var moveX = 0;
            ul.addEventListener('touchstart',function( e ){
                startX = e.targetTouches[0].pageX;
                clearInterval(timer);
            });
            ul.addEventListener('touchmove',function( e ){
                moveX = e.targetTouches[0].pageX - startX;
                var translateX = -index * w + moveX;
                ul.style.transition = 'none';
                ul.style.transform = 'translateX('+ translateX +'px)';
                flag = true;
                e.preventDefault();
            });
            ul.addEventListener('touchend',function( e ){
                if(flag){
                        if(Math.abs( moveX ) > 50){
                        if(moveX > 0){
                            index--;
                        }else{
                            index++;
                        }
                        var translateX = -index * w;
                        ul.style.transition = "all 1s";
                        ul.style.transform = 'translateX('+ translateX +'px)';
                    }else{
                        var translateX = -index * w;
                        ul.style.transition = "all .3s";
                        ul.style.transform = 'translateX('+ translateX +'px)';
                    }
                }
                clearInterval(timer);
                timer = setInterval(function(){
                    index ++;
                    var translateX = -w * index;
                    ul.style.transition = "all 1s";
                    ul.style.transform = 'translateX('+ translateX +'px)';
                } , 2000);
            });

            var body = document.querySelector('body');
            body.addEventListener('touchmove',function(){
                search.style.background = "white";
            });
            body.addEventListener('touchend',function(){
                search.style.background = "none";
            });
        })
    </script>

    

</body>
</html>